<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax进行交互</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
    </style>
</head>
<body>
    <script>
        //1. 得到1个ajax对象 (原生，后期不怎么会使用)
        let xhr = new XMLHttpRequest()
        //2. 准备工作：定义请求地址，方式 (向指定的地址的服务器发起请求)
        xhr.open("DET","http://127.0.0.1:8080")
        //3. 向服务端发起请求
        xhr.send("")

        //接收响应并处理
        //4. 监听ajax对象上状态的变化
        xhr.onreadystatechange = function(){
            /* 
                xhr.readyState 请求状态码
                    0 请求未初始化
                    1 建立起了与服务器的连接
                    2 服务端已经接收到请求了
                    3 服务端正在处理请求
                    4 服务端处理完请求，响应已就绪
                xhr.status 响应状态码
                100+ 请求被接受，正在处理
                200+ 请求成功，得到响应内容
                300+ 
                400+ 客户端请求错误
                500+ 服务器发生错误
            */
        //console.log(xhr.readyState);
        // console.log(xhr.status);
            if(xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)){
                console.log(JSON.parse(xhr.response));//响应内容
                
            }
        }
        /* 
            使用规范：
                get 要东西过来
                post 给东西出去

            JSON.parse() 将数组/对象格式的字符串转化为数组/对象
         */
    </script>
</body>
</html>